<template>
    <IDrawer v-model="defaultValue" :loading="loading">
        <Form ref="formCreate" :model="data" label-position="top" :rules="ruleValidate">
            <Row :gutter="10">
                <Col span="12">
                    <FormItem label="姓名" prop="name">
                        <Input placeholder="请输入姓名" v-model="data.name"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="邮箱" prop="email">
                        <Input placeholder="请输入邮箱" v-model="data.email"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="手机号码" prop="phone">
                        <Input placeholder="手机号码" v-model="data.phone"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="用户状态" prop="status">
                        <Select v-model="data.status">
                            <Option :value="1">开启</Option>
                            <Option :value="0">关闭</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <FormItem label="客户备注" prop="remark">
                <Input v-model="data.remark" show-word-limit type="textarea" maxlength="1000"></Input>
            </FormItem>
        </Form>
        <div slot="footer">

            <ButtonGroup>
                <Button type="primary" icon="ios-add" @click="submit('formCreate')">提交</Button>
                <Button type="warning" icon="md-log-out" @click="defaultValue = false">返回</Button>
            </ButtonGroup>
        </div>
    </IDrawer>
</template>

<script>
    import IDrawerMixins from "../../../../mixins/iDrawerMixins";
    import IDrawer from "../../../../components/layout/IDrawer";
    import RemoteSelect
        from "../../../../../../../vendor/luffyzhao/laravel-admin-auth/src/Pulishes/resources/vue/src/components/form/remoteSelect";

    export default {
        name: "create",
        components: {RemoteSelect, IDrawer},
        mixins: [IDrawerMixins],
        data(){
            return {
                loading: false,
                data: {},
                ruleValidate: {
                    name: [
                        {required: true, message: '用户姓名必须填写', trigger: 'blur'},
                        {type: 'string', min: 2, max: 20, message: '用户姓名字符长度是2-20个字符', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '用户邮箱不能为空', trigger: 'blur'},
                        {type: 'email', message: '用户邮箱格式不正确', trigger: 'blur'},
                    ],
                    phone: [
                        {required: true, message: '手机号码必须填写', trigger: 'blur'},
                        {pattern: /^1[34578]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'}
                    ],
                    status: [
                        {required: true, type: 'enum', enum: [1, 0], message: '用户状态不能为空'}
                    ]
                }
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData(){
                this.loading = true;
                this.$http.get(`customer/account/${this.props.id}`).then((res) => {
                    this.data = res || {};
                }).finally(() => {
                    this.loading = false;
                })
            },
            submit(name){
                this.validate(name).then(() => {
                    this.loading = true;
                    this.$http.post(`customer/account/${this.props.id}`, this.data).then(() => {
                        this.loading = false;
                    }).finally(() => {
                        this.defaultValue = false;
                    })
                });
            }
        }
    }
</script>

<style scoped>

</style>
